<template>
  <div>
    <van-row @click="showPopup">
      <van-col span="6">
        <img :src="touxiang" alt="" />
      </van-col>
      <van-col span="14">{{ nickname }}</van-col>
      <van-col span="4">
        <van-icon :name="logicon" @click="tuichu"></van-icon>
      </van-col>
    </van-row>

    <van-grid :column-num="3">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 登录框 -->
    <van-cell is-link v-show="show"></van-cell>
    <van-popup v-model="show"
      ><van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form></van-popup
    >

    <!-- 提示框 -->
    <van-dialog
      v-model="tanchukuan"
      title="退出登录"
      show-cancel-button
      @confirm="tolog"
    >
      <div class="tishikuan">您真的要退出登录吗?</div>
    </van-dialog>
  </div>
</template>

<script>
import touxiang from "../assets/img/avatar.png";
import { ToLogin } from "../../request/api";
export default {
  data() {
    return {
      touxiang: touxiang,
      show: false,
      username: "",
      password: "",
      nickname: "点击登录",
      logicon: "arrow",
      tanchukuan: false,
    };
  },
  created() {
    // 页面一刷新，登录的头像昵称都没了，
    // 所以需要页面刷新的时候，判断有没有登录，有登录就把用户信息渲染到页面上
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.touxiang = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.logicon = "cross";
    }
  },
  methods: {
    // 退出登录确认
    tolog() {
      this.$toast.success("退出登录成功!");
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.touxiang = touxiang;
      (this.nickname = "点击登录"), (this.logicon = "arrow");
    },
    // 弹出框
    tuichu() {
      let token = localStorage.getItem("token");
      if (token) {
        this.tanchukuan = true;
      }
    },
    showPopup() {
      // 判断有没有登录，有就return掉
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.show = true;
    },
    onSubmit(values) {
      console.log("submit", values["用户名"]);
      console.log("submit", values["密码"]);
      ToLogin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        console.log(res);
        // 登录成功之后的业务逻辑
        // 1.提示用户登录成功
        this.$toast.success("登录成功!");
        // 2.保存token值和用户常用信息到本地存储
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));

        // 3.关闭登录窗口
        setTimeout(() => {
          this.show = false;
        }, 500);
        // 4.把用户基本信息渲染到页面上
        this.touxiang = res.data.userInfo.avatar;
        this.nickname = res.data.userInfo.nickname;
        // 5.修改图标
        this.logicon = "cross";
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.16rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 85%;
}
.tishikuan {
  text-align: center;
  padding: 10px 0;
}
</style>